<!DOCTYPE html>

<html>

	<head>

		<meta name=viewport content='user-scalable=yes'/>

		<link rel=stylesheet href=css/jquery.mobile.css />
		<link rel=stylesheet href=css/additional_styles.css />

		<script src=jquery/jquery.js></script>
		<script src=jquery/jquery.mobile.js></script>
		<script src=jquery/function.js></script>
		<script src=jquery/jquery.knob.js></script>

		<title>Karten</title>
	</head>

	<body>
		<div data-role='page' id='maps1' data-theme=b style='margin-left: 0; margin-right: 0;'>

			<div data-role='popup' id='popupMenu1' data-theme=b>
				<ul data-role='listview' data-inset='true' style='min-width:210px;' data-theme=b>
					<li data-role='divider' data-theme=a>
						Men&uuml;
					<li>
						<a href='lightmanager.php' data-ajax=false>Aktoren</a>
					</li>
					<li>
						<a href='map.php' data-ajax=false>Karte</a>
					</li>
					<li>
						<a href='szenen.php' data-ajax=false>Szenen</a>
					</li>
				</ul>
			</div>

			<div data-role="panel" id="dimpanel" data-display="overlay" >
				<!-- panel content goes here -->

				<ul data-role="listview" data-inset="false" data-theme="d" data-split-theme="d">
					<li>
						<a href="#" id=dim_an> <img src=images/green.svg size=50px> <h2>an</h2> </a>
					</li>

					<li>
						<a href="#" id=dim_aus> <img src=images/red.svg size=50px> <h2>aus</h2> </a>
					</li>
					<li>
						<a href="#" id=dim_bright> <img src=images/plus.svg size=50px> <h2>heller</h2> </a>
					</li>

					<li>
						<a href="#" id=dim_dark> <img src=images/minus.svg size=50px> <h2>dunkler</h2> </a>
					</li>
				</ul>
				<p>

					<input id="knob1" class="knob" data-width="200" data-displayPrevious=true data-fgColor="#91908fff" data-skin="tron" data-thickness=".2" value="8" data-step="1" data-min="0" data-max="16">

				</p>

			</div><!-- /panel -->

			<div data-role="panel" id="schaltpanel" data-display="overlay" >
				<!-- panel content goes here -->

				<ul data-role="listview" data-inset="false" data-theme="d" data-split-theme="d">
					<li>
						<a href="#" id=schalt_an> <img src=images/green.svg size=50px> <h2>an</h2> </a>
					</li>

					<li>
						<a href="#" id=schalt_aus> <img src=images/red.svg size=50px> <h2>aus</h2> </a>
					</li>
				</ul>

			</div><!-- /panel -->
			<div data-role="panel" id="szenen" data-display="overlay" data-position="right">
				<!-- panel content goes here -->

				<div data-role=collapsible-set data-theme=b data-content-theme='d'>
					<div data-role=collapsible>
						<h2>Stimmungen</h2>
						<ul data-role=listview data-split-icon=gear data-split-theme=d>
							<li>
								<a href=# onClick="perform_light_scene('001');"> <img src=images/scenes/default.png /> <h3>Alles aus</h3> <p>

								</p> </a>
								<a href=# onClick="stepPopup('001', 0)" data-rel=#popup data-position-to=window data-transition=slideup>Details</a>
							</li>

							<li>
								<a href=# onClick="perform_light_scene('002');"> <img src=images/scenes/tv.png /> <h3>Fernsehlicht</h3> <p>

								</p> </a>
								<a href=# onClick="stepPopup('002', 0)" data-rel=#popup data-position-to=window data-transition=slideup>Details</a>
							</li>

							<li>
								<a href=# onClick="perform_light_scene('005');"> <img src=images/scenes/sleep.png /> <h3>Gute Nacht</h3> <p>

								</p> </a>
								<a href=# onClick="stepPopup('005', 0)" data-rel=#popup data-position-to=window data-transition=slideup>Details</a>
							</li>

						</ul>
					</div>
					<div data-role=collapsible>
						<h2>Wohnzimmer</h2>
						<ul data-role=listview data-split-icon=gear data-split-theme=d>
							<li>
								<a href=# onClick="perform_light_scene('004');"> <img src=images/scenes/couch_dim.png /> <h3>Wohnzimmer gedimmt</h3> <p>

								</p> </a>
								<a href=# onClick="stepPopup('004', 0)" data-rel=#popup data-position-to=window data-transition=slideup>Details</a>
							</li>

							<li>
								<a href=# onClick="perform_light_scene('007');"> <img src=images/scenes/couch_hell.png /> <h3>Wohnzimmer nur Decke</h3> <p>

								</p> </a>
								<a href=# onClick="stepPopup('007', 0)" data-rel=#popup data-position-to=window data-transition=slideup>Details</a>
							</li>

							<li>
								<a href=# onClick="perform_light_scene('008');"> <img src=images/scenes/wz_aus.png /> <h3>Wohnzimmer aus</h3> <p>

								</p> </a>
								<a href=# onClick="stepPopup('008', 0)" data-rel=#popup data-position-to=window data-transition=slideup>Details</a>
							</li>

						</ul>
					</div>
					<div data-role=collapsible>
						<h2>Esszimmer</h2>
						<ul data-role=listview data-split-icon=gear data-split-theme=d>
							<li>
								<a href=# onClick="perform_light_scene('003');"> <img src=images/scenes/ez_dim.png /> <h3>Esszimmer gedimmt</h3> <p>

								</p> </a>
								<a href=# onClick="stepPopup('003', 0)" data-rel=#popup data-position-to=window data-transition=slideup>Details</a>
							</li>

							<li>
								<a href=# onClick="perform_light_scene('006');"> <img src=images/scenes/ez_hell.png /> <h3>Esszimmer hell</h3> <p>

								</p> </a>
								<a href=# onClick="stepPopup('006', 0)" data-rel=#popup data-position-to=window data-transition=slideup>Details</a>
							</li>

							<li>
								<a href=# onClick="perform_light_scene('009');"> <img src=images/scenes/ez_aus.png /> <h3>Esszimmer aus</h3> <p>

								</p> </a>
								<a href=# onClick="stepPopup('009', 0)" data-rel=#popup data-position-to=window data-transition=slideup>Details</a>
							</li>

						</ul>
					</div>
				</div>

			</div><!-- /panel -->

			<div data-role=content data-theme=b >

				<div style="position:absolute; width:95%; left:0px; border:solid 0px blue; padding:5px; max-height:80%" >
					<div id=picture  >
						<img src=images/maps/background/Overview.gif width=100% alt=Overview>
					</div>
					<div  style="position:absolute; top:27%; left:12%; width:4%; height:4%; z-index=3; border:solid 0px blue;">
						<a href="#">
						<div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="show_panel_dimmer('005');" onmouseover="#">
							<img src=images/maps/button/birne.gif width=100%>
						</div> </a>
					</div>
					<div  style="position:absolute; top:27%; left:33%; width:4%; height:4%; z-index=3; border:solid 0px blue;">
						<a href="#">
						<div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px green;" onclick="show_panel_dimmer('010');">
							<img src=images/maps/button/birne.gif width=100%>
						</div> </a>
					</div>
					<div  style="position:absolute; top:4%; left:20%; width:4%; height:4%; z-index=3; border:solid 0px blue;">
						<a href="#">
						<div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="show_panel_actor('013');">
							<img src=images/maps/button/birne.gif width=100%>
						</div> </a>
					</div>
					<div  style="position:absolute; top:27%; left:54%; width:4%; height:4%; z-index=3; border:solid 0px blue;">
						<a href="#">
						<div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="show_panel_actor('012');">
							<img src=images/maps/button/birne.gif width=100%>
						</div> </a>
					</div>
					<div  style="position:absolute; top:30%; left:72%; width:4%; height:4%; z-index=3; border:solid 0px blue;">
						<a href="#">
						<div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="show_panel_actor('011');">
							<img src=images/maps/button/birne.gif width=100%>
						</div> </a>
					</div>
					<div  style="position:absolute; top:4%; left:26%; width:4%; height:4%; z-index=3; border:solid 0px blue;">
						<a href="#">
						<div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="show_panel_dimmer('006');">
							<img src=images/maps/button/birne.gif width=100%>
						</div> </a>
					</div>
					<div  style="position:absolute; top:80%; left:14%; width:4%; height:4%; z-index=3; border:solid 0px blue;">
						<div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="show_panel_actor('001');">
							<img src=images/maps/button/birne.gif width=100%>
						</div>
					</div>
					<div  style="position:absolute; top:90%; left:3%; width:4%; height:4%; z-index=3; border:solid 0px blue;">
						<div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="show_panel_actor('004');">
							<img src=images/maps/button/birne.gif width=100%>
						</div>
					</div>
					<div  style="position:absolute; top:85%; left:31%; width:4%; height:4%; z-index=3; border:solid 0px blue;">
						<div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="show_panel_actor('002');">
							<img src=images/maps/button/birne.gif width=100%>
						</div>
					</div>
					<div  style="position:absolute; top:62%; left:12%; width:4%; height:4%; z-index=3; border:solid 0px blue;">
						<div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="show_panel_actor('003');">
							<img src=images/maps/button/birne.gif width=100%>
						</div>
					</div>
					<div  style="position:absolute; top:4%; left:10%; width:4%; height:4%; z-index=3; border:solid 0px blue;">
						<div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="show_panel_actor('007');">
							<img src=images/maps/button/birne.gif width=100%>
						</div>
					</div>
					<div  style="position:absolute; top:65%; left:92%; width:4%; height:4%; z-index=3; border:solid 0px blue;">
						<div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="show_panel_actor('008');">
							<img src=images/maps/button/birne.gif width=100%>
						</div>
					</div>
					<div  style="position:absolute; top:45%; left:83%; width:4%; height:4%; z-index=3; border:solid 0px blue;">
						<div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="show_panel_actor('009');">
							<img src=images/maps/button/birne.gif width=100%>
						</div>
					</div>
				</div>
			</div>

			<div data-role=header data-position=fixed id=footer_actors data-theme=a>
				<div data-role=navbar>
					<ul>
						<li></li>
						<li>
							<a href='lightmanager.php'>Home</a>
						</li>
						<li>
							<a href='#' onclick="show_panel_scenes();">Szenen</a>
						</li>
					</ul>
				</div>
			</div>

		</div>
	</body>

</html>

